<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
            margin-top: 20px;
        }

        .nav {
            list-style: none;
            width: 150px;
            position: relative;
            height: 340px;
            box-sizing: border-box;
            text-align: center;
        }

        .nav a {
            text-decoration: none;
            color: #007af9;
            font-size: 25px;
            line-height:66px;
            width:151px;
            height:66px;
            display: block;
            box-sizing:border-box;
            position:absolute;
            z-index:3;

        }
        .nav li{
            height:69px;
            background:#fff;
        }
        .nav a.on {
            border:1px solid #f60;
            border-right:#fff;
            background: pink;
            color: #f60;
        }

        .nav img {
            width: 820px;
            height: 340px;
            position:absolute;
            left:150px;
            top:0;
            display:none;
            border:1px solid #f60;
        }
        
    </style>
</head>

<body>
    <div class="container">
        <ul class="nav">
            <li>
                <a href="">商品折扣</a>

                <img src="images/01.jpeg" alt="">

            </li>
            <li>
                <a href="">MSI宝典</a>

                <img src="images/02.jpeg" alt="">

            </li>
            <li>
                <a href="">RNG VS DK</a>

                <img src="images/03.jpeg" alt="">

            </li>
            <li>
                <a href="">全球总决赛</a>

                <img src="images/04.jpeg" alt="">

            </li>
            <li>
                <a href="">新英雄格温</a>

                <img src="images/05.jpeg" alt="">

            </li>
        </ul>
    </div>
    <script>
        var li=document.querySelectorAll('.nav li');
        li.forEach(function(v,i){
            v.onmouseover=function(){
                this.children[1].style.display='block';
                this.children[0].className='on';
            }
            v.onmouseout=function(){
                this.children[1].style.display='none';
                this.children[0].className='';
            }
        });
    </script>
</body>

</html>